import { Button, message, Modal, Upload } from 'antd'
import React, { useState}from 'react'
import { baseURL } from 'utils/request'
import { getToken } from 'utils/storage'
import { UploadOutlined } from '@ant-design/icons';

export default function TestPage() {
    const [fileList, setFileList] = useState([]);
    const [imgSrc ,setImgSrc] = useState('')
    const props = {
        accept:'.png,.jpg,.jpeg',
        name: 'image',
        action: `${baseURL}/v1_0/upload`,
        headers: {
            authorization:`Bearer${getToken()}`
        },
        onChange(info) {
            setFileList(info.fileList);
            if (info.file.status !== 'uploading') {
                console.log(15, info.file, info.lileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file`)
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file`)
            }
        },
        onPreview(file) {
            console.log(26, file);
            setImgSrc(file.thumbUrl)
        },
        beforeUpload(file) {
            const imgs = ['image/jpg', 'image/jpeg', 'image/png']

            if (!imgs.includes(file.type)) {
                message.warning('不允许的文件类型')
                return Upload.LIST_IGNORE
            }
        }




    }


    return (
        <>
        <Upload {...props} listType="picture-card" fileList={fileList}>
        {/* 4.判断fileList的数量， 是否显示按钮 */}
        {fileList.length === 3 ? null : <UploadOutlined />}
      </Upload>
            <Modal title="Basic Modal" visible={!!imgSrc} footer={null} onCancel={()=> setImgSrc('')}>
<img src={imgSrc} alt="" width={300} style={{objectFit:'cover'}}/>
      </Modal>

      </>
    )
}
